<!-- src/components/Cube.vue -->
<template>
  <div class="cube">
    <div class="cube-face top">
      <div class="content">
        <div class="text">{{ title }}</div>
        <div class="number">{{ number }}</div>
      </div>
    </div>
    <div class="cube-face front"></div>
    <div class="cube-face right"></div>
    <div class="cube-face left"></div>
    <div class="cube-face back"></div>
    <div class="cube-face bottom"></div>
  </div>
</template>

<script>
export default {
  name: 'Cube',
  props: {
    title: {
      type: String,
      required: true
    },
    number: {
      type: [String, Number],
      required: true
    }
  }
}
</script>

<style scoped>
.cube {
  position: absolute;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.cube:hover {
  transform: scale(1.1);
}

.cube-face {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid rgba(255, 215, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.9;
  backdrop-filter: blur(2px);
}

.top {
  background: rgba(80, 120, 100, 0.7);
  transform: rotateX(90deg) translateZ(75px);
}

.front {
  background: rgba(60, 100, 80, 0.7);
  transform: translateZ(75px);
}

.right {
  background: rgba(70, 110, 90, 0.7);
  transform: rotateY(90deg) translateZ(75px);
}

.left {
  background: rgba(50, 90, 70, 0.7);
  transform: rotateY(-90deg) translateZ(75px);
}

.back {
  background: rgba(40, 80, 60, 0.7);
  transform: rotateY(180deg) translateZ(75px);
}

.bottom {
  background: rgba(30, 70, 50, 0.7);
  transform: rotateX(-90deg) translateZ(75px);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text {
  font-size: 18px;
  font-weight: bold;
  color: #ffd700;
  margin-bottom: 10px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.number {
  font-size: 24px;
  color: #ffffff;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
</style>